Draw A Route On Your Google Maps: Integrating Gpolyline
Henri Chen, Principal Engineer, Potix Corporation
Auguest 13, 2007
Applicable to ZK 3.0RC and later
- Applicable to zk-GMaps-2.0_4 and later
Introduction
This is the third article regarding integrating Google Maps with ZK. The previous two articles are here(the first) and here(the second). The first article tells you how to use the new ZK gmaps component and the second one is talking about how to integrate Google Maps as a ZK component. If you have not read them, I will suggest you at least read the first one so you have a complete concept about how to use this ZK Google Map component. This article is mainly on how to use the new features added since zk-GMap-2.0_4 release.
The Google Maps JavaScript API set allows you to "overlay" polylines on top of its maps. The ZK team has taken the effort to integrate this feature into ZK as a new component gpolyline so you can now draw the vehicle route directly with pure java and/or designed it with zul tag now. In this new release of GMaps (zk-GMaps-2.0_4), besides supporting the gpolyline, we also support the new features of customizing the gmarker image icon with its fully twenty one parameters. That is, you can now specify the gmarker icon image and change the anchor point, etc. with Java codes. We also start supporting draggable gmarker and allow handling the drop event since this release. As for the gmaps component, there are also two new features. One is setMapType() that allow developer to change the Map type to normal, satellite, or hybrid. Another feature is the supporting of the double click event.
Installation
To use these new features of gmaps, gmarker, and gpolyline components, you have to first copy the new gmapsz.jar in zk-GMaps-2.0_4.zip under dist/lib folder to ${TOMCAT}/shared/lib and reboot or copy it to WEB-INF/lib of your web application and deploy. For detail ZK installation, please refer to our Quick Start Guide.
Two <gpolyline> Examples
Following I will demostrate two simple examples that utilize some new features.
Example One
End user double click the mouse to specify the polyline vertex and the onMapDoubleClick event listener connect the vertex together to form a polyline.
- Demo
- Source Code
<?root-attributes xmlns:v="urn:schemas-microsoft-com:vml"?><!-- For IE -->
<zk>
<!-- Replace "abcdefg" to proper Google Maps key per your host -->
<script src="http://maps.google.com/maps?file=api&v=2&key=abcdefg"
type="text/javascript"></script>
<gmaps id="mymap" width="600px" height="360px" showSmallCtrl="true"
showTypeCtrl="true" lat="40.71213418976525" lng="-73.96785736083984" zoom="15" >
<attribute name="onMapDoubleClick">
double lat = event.lat;
double lng = event.lng;
//add a gmarker on the vertex
new Gmarker("", lat, lng).setParent(mymap);
//add a polyline vertex point
mypoly.addPoint(lat, lng, 3);
//display the vertex latitude and longitude
lbl.value = lbl.value+ event.lat + ","+event.lng+";\n";
</attribute>
<gpolyline id="mypoly" color="#3333cc" weight="10"/>
</gmaps>
<button label="normal" onClick="mymap.setMapType("normal")"/>
<button label="satellite" onClick="mymap.setMapType("satellite")"/>
<button label="hybrid" onClick="mymap.setMapType("hybrid")"/>
<vbox>
data: <label id="lbl" pre="true"/>
</vbox>
</zk>
The example listen to the onMapDoubleClick event of gmaps. Whenever the event fired, we new a Gmarker at the "double clicked" latitude and longitude and then add an associated vertex point to the Gpolyline. Finally, display the new latitude and longitude of this vertex in label "lbl".
Example Two
End user drag the Z marker to specify the polyline vertex and the onMarkerDrop event listener connect the vertex together to form a polyline.
- Demo
- Source Code
<?root-attributes xmlns:v="urn:schemas-microsoft-com:vml"?><!-- For IE -->
<zk>
<!-- Replace "abcdefg" to proper Google Maps key per your host -->
<script src="http://maps.google.com/maps?file=api&v=2&key=abcdefg"
type="text/javascript"></script>
<gmaps id="mymap" width="600px" height="360px" showSmallCtrl="true" showTypeCtrl="true"
lat="40.71213418976525" lng="-73.96785736083984" zoom="15">
<gmarker lat="40.71213418976525" lng="-73.96785736083984" draggable="true"
iconImage="http://www.google.com/mapfiles/markerZ.png">
<attribute name="onMarkerDrop">
double lat = event.lat;
double lng = event.lng;
//add a gmarker on the vertex
Gmarker m = new Gmarker("", lat, lng);
//adjust anchor point so new gmarker will not block the z-marker
m.setIconAnchorX(6);
m.setIconAnchorY(8);
m.setParent(mymap);
//add a polyline vertex point
mypoly.addPoint(lat, lng, 3);
//display the vertex latitude and longitude
lbl.value = lbl.value+ event.lat + ","+event.lng+","+mypoly.encodedLevels+";\n";
//pan the map to the new latitude and longitude as the new center
mymap.panTo(lat, lng);
</attribute>
</gmarker>
<gpolyline id="mypoly" color="#3333cc" weight="10"/>
</gmaps>
<button label="normal" onClick="mymap.setMapType("normal")"/>
<button label="satellite" onClick="mymap.setMapType("satellite")"/>
<button label="hybrid" onClick="mymap.setMapType("hybrid")"/>
<vbox>
data: <label id="lbl" pre="true"/>
</vbox>
</zk>
The example code listen to the onMarkerDrop event of the Z-gmarker. Whenever the event fired, we new a Gmarker at the "dropped" latitude and longitude and then add an associated vertex point to the Gpolyline. Finally, display the new latitude and longitude of this vertex in label "lbl". Note how the Z-gmarker changes its icon image. Also note how we change the icon anchor point of the new Gmarker so it will not block the original Z-gmarker.
Summary
As I have mentioned in the previous article, "The Google Maps API is a versatile API set. The ZK team will integrate more functions and events into the gmaps component so ZK application developers can control it easily". And here you are. You can handle double click event, drag the gmarker and handle drop event. And you can draw route on your Google Maps via the new simple gpolyline component. I hope you enjoy these new features and give us feedbacks. Thanks.
Download
| Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License. |